<template>
  <div class="con">
    <el-container>
      <el-aside width="300px">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form ref="form" size="mini" :model="form" label-width="80px">
          <el-form-item label="住院号">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="ABO">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="RHD">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
        <el-divider content-position="left">住院信息</el-divider>
        <el-form ref="form" size="mini" :model="form" label-width="80px">
          <el-form-item label="病区">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="科室">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="床号">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="妊娠史">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="输血史">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </el-aside>
      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>申请信息</span>
          </div>
          <el-form
            size="mini"
            :inline="true"
            label-width="100px"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="预输血时间">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
            <el-form-item label="输血目的">
              <el-input style="width:300px" v-model="formInline.user"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            size="mini"
            :inline="true"
            label-width="100px"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="输血性质">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
            <el-form-item label="大量用血">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            size="mini"
            :inline="true"
            label-width="100px"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="申请ABO">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
            <el-form-item label="申请RHD">
              <el-input v-model="formInline.user"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="用血备注">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
        <el-tabs type="border-card">
          <el-tab-pane label="血液成分">
            <el-table :data="tableData" height="250" border style="width: 100%">
              <el-table-column type="index" ></el-table-column>
              <el-table-column prop="date" label="输液成分" width="180"></el-table-column>
              <el-table-column prop="name" label="血量" width="80"></el-table-column>
              <el-table-column prop="address" label="单位"></el-table-column>
              <el-table-column prop="address" label="项目备注"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="预输血明细"></el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formInline: {
        user: "",
        region: "",
      },
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.el-divider {
  margin: 20px 0;
}
.el-form-item {
  margin-bottom: 10px;
}
.con {
  height: 450px;
  overflow: auto;
  .el-aside {
    height: 450px;
  }
}
</style>